// 1、导入 React 第三方包
import React from 'react';
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));

// 2、使用 React API 创建 React 元素
// 创建一个 h1 标签
// const h1 = React.createElement('h1', null, 'Hello React');
const h1 = React.createElement('h1', { key: 1 }, 'Hello React');

// 创建一个 p 标签，包含“月薪过万”文本
// p 增加 id 属性
// const p = React.createElement(
//   'p',
//   { id: 123, className: 'p-title' },
//   '月薪过万'
// );
const p = React.createElement(
  'p',
  { key: 2, id: 123, className: 'p-title' },
  '月薪过万'
);
console.log(typeof p, p);

// 创建一个div标签，包含上面的p标签
const div = React.createElement('div', null, p);

// 创建如下结构
const div2 = React.createElement(
  'div',
  null,
  React.createElement('h2', null, '购物列表'),
  React.createElement(
    'ul',
    null,
    React.createElement('li', null, '华为'),
    React.createElement('li', null, 'iPhone')
  )
);

// 创建一个非w3c规范的html标签会怎样？
const hello = React.createElement('hello', null, 'hello');

// 3、渲染h1标签
root.render(div2);
// 如果使用数组渲染，每个元素加一个key即可
// root.render([h1, p]);
